@namespace BulmaRazor.Components

@inherits BulmaComponentBase

<div @attributes="Attributes" class="@classes">

    <ModalBackground @onclick="backgroundClickHandle"/>
    <div class="modal-card">
        <header class="modal-card-head">
            <p class="modal-card-title">@HeaderText</p>
            @if (ShowClose)
            {
                <button class="delete" aria-label="close" @onclick="Close"></button>
            }
        </header>
        <section class="modal-card-body">
            @BodySlot
        </section>
        <footer class="modal-card-foot">
            @FootSlot
        </footer>
    </div>
</div>

@code{

    string classes => CssBuilder.Default("modal")
        .AddClassFromAttributes(Attributes)
        .AddClass("is-active", IsActive)
        .Build();

    /// <summary>
    /// 标题文本
    /// </summary>

    [Parameter]
    public string HeaderText { get; set; }

    /// <summary>
    /// 是否显示
    /// </summary>
    [Parameter]
    public bool IsActive { get; set; }
    

    /// <summary>
    /// 点击背景是否关闭
    /// </summary>
    [Parameter]
    public bool CloseOnClickBackground { get; set; } = false;

    /// <summary>
    /// 是否显示关闭图标
    /// </summary>
    [Parameter]
    public bool ShowClose { get; set; } = true;

    /// <summary>
    /// 内容卡槽
    /// </summary>
    [Parameter]
    public RenderFragment BodySlot { get; set; }

    /// <summary>
    /// 脚部卡槽
    /// </summary>
    [Parameter]
    public RenderFragment FootSlot { get; set; }

    /// <summary>
    /// 关闭事件回调
    /// </summary>
    [Parameter]
    public EventCallback OnClose { get; set; }

    /// <summary>
    /// 关闭
    /// </summary>
    public Task Close()
    {
        IsActive = false;
        return OnClose.InvokeAsync();
    }

    /// <summary>
    /// 显示
    /// </summary>
    public void Show()
    {
        IsActive = true;
    }

    private void backgroundClickHandle()
    {
        if (CloseOnClickBackground)
        {
            Close();
        }
    }


}